<template>
    <page-box class="container">
        <template v-slot:header>
            <ask-breadcrumb>
                <template v-for="(item, index) in $getBreadCrumbsName($route.path)">
                    <ask-breadcrumb-item :key="index" v-if="item.path" :to="'/' + item.path">{{ item.meta.title }}</ask-breadcrumb-item>
                    <ask-breadcrumb-item :key="index" v-else>{{ item.meta.title }}</ask-breadcrumb-item>
                </template>
                <ask-breadcrumb-item>详情</ask-breadcrumb-item>
            </ask-breadcrumb>
        </template>
        <div class="body-header">
            <div>
                <p>
                    <strong>{{ projectInfo.name }}</strong>
                    <span
                        style="background-color:#de2728"
                        v-if="projectInfo.stageCompleteStatus === 1"
                        >延迟</span
                    >
                    <span
                        style="background-color:#32A78F"
                        v-if="projectInfo.stageCompleteStatus === 2"
                        >正常</span
                    >
                    <span
                        style="background-color:#32A78F"
                        v-if="projectInfo.stageCompleteStatus === 3"
                        >提前</span
                    >
                </p>
                <div class="line">
                    <span>实际进度</span>
                    <el-progress
                        :percentage="projectInfo.process || 0"
                    ></el-progress>
                </div>
            </div>
            <el-button type="primary" @click="handleGoBack()">返回</el-button>
        </div>
        <div class="body-container">
            <div class="body-left">
                <div class="basic-info">
                    <p>基本信息</p>
                    <ul>
                        <li>
                            <span>投资方：</span>
                            <em>{{ projectInfo.investor }}</em>
                        </li>
                        <li>
                            <span>投资总额（万元）： </span>
                            <em>{{
                                Number(projectInfo.totalInvestment) / 10000
                            }}</em>
                        </li>
                        <li>
                            <span>负责单位/人：</span>
                            <em>{{ projectInfo.responsible }}</em>
                        </li>
                        <li>
                            <span>牵头领导：</span>
                            <em>{{ projectInfo.leadName }}</em>
                        </li>
                        <li>
                            <span>项目地址：</span>
                            <em @click="showAddress" class="project-address">{{ projectInfo.address }}</em>
                        </li>
                        <li>
                            <span>项目计划完成时间： </span>
                            <em>{{ projectInfo.endDate }}</em>
                        </li>
                        <li>
                            <span>项目查看权限：</span>
                            <em>{{ authString.toString() }}</em>
                        </li>
                        <li>
                            <span>项目建设内容：</span>
                            <em>{{ projectInfo.projectContent }}</em>
                        </li>
                        <li>
                            <span>备注：</span>
                            <em>{{ projectInfo.remarks }}</em>
                        </li>
                    </ul>
                </div>
                <div class="img-info">
                    <p>图片</p>
                    <ul v-if="imgList.length > 0">
                        <li v-for="(item, index) in imgList" :key="index">
                            <img :src="item.url" alt="" />
                        </li>
                    </ul>
                    <div v-else></div>
                </div>
                <div class="info-node">
                    <p>项目关键节点</p>
                    <el-table
                        :data="projectInfo.stage"
                        border
                        style="width: 550px"
                    >
                        <el-table-column
                            type="index"
                            label="序号"
                            width="60"
                            align="center"
                        ></el-table-column>
                        <el-table-column
                            prop="name"
                            label="项目节点名称"
                            align="center"
                            show-overflow-tooltip
                        >
                        </el-table-column>
                        <el-table-column
                            prop="endDate"
                            label="计划完成时间"
                            align="center"
                            width="200"
                            show-overflow-tooltip
                        >
                            <template slot-scope="scope">
                                <span>{{
                                    scope.row.endDate.substring(0, 10)
                                }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="项目占比"
                            align="center"
                            width="120"
                            show-overflow-tooltip
                        >
                            <template slot-scope="scope">
                                {{ scope.row.proportion }}%
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
            <div class="body-right">
                <div class="process-info">
                    <p>项目进度</p>
                    <ask-empty-text
                        v-if="processList.length === 0"
                    >
                    </ask-empty-text>
                    <el-table v-show="processList.length" :data="processList" border style="width: 720px">
                        <el-table-column
                            prop="updateTime"
                            label="更新日期"
                            align="center"
                            show-overflow-tooltip
                        >
                            <template slot-scope="scope">
                                <span>{{
                                    scope.row.updateTime.substring(0, 10)
                                }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="content"
                            label="工作事项"
                            align="center"
                            show-overflow-tooltip
                        >
                        </el-table-column>
                        <el-table-column
                            prop="collector"
                            label="更新人"
                            align="center"
                            show-overflow-tooltip
                        >
                        </el-table-column>
                        <el-table-column
                            prop="department"
                            label="部门"
                            align="center"
                            show-overflow-tooltip
                        >
                        </el-table-column>
                        <el-table-column label="操作" align="center">
                            <template slot-scope="scope">
                                <el-button
                                    type="text"
                                    size="small"
                                    @click="handleItemClick(scope)"
                                    >详情</el-button
                                >
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div v-if="this.processList.length > 0" class="process-details">
                    <p>进度详情</p>
                    <ul>
                        <li>
                            <span>所属阶段</span
                            ><font>{{ detailsList.stage }}</font>
                        </li>
                        <li>
                            <span>本阶段进度</span
                            ><font>{{ detailsList.process }}%</font>
                        </li>
                        <li>
                            <span>工作事项</span
                            ><font>{{ detailsList.content }}</font>
                        </li>
                        <li>
                            <span>完成时间</span
                            ><font>{{
                                detailsList.completeTime.substring(0, 10)
                            }}</font>
                        </li>
                        <li
                            class="imgbox"
                            v-if="detailsList.resImgList.length > 0"
                        >
                            <span>图片</span
                            ><font>
                                <img
                                    @click="previewImg(detailsList.resImgList)"
                                    :src="
                                        $staticUrl +
                                            '/' +
                                            detailsList.resImgList[0]
                                    "
                                    alt=""
                                />
                                <i
                                    >共{{
                                        detailsList.resImgList.length
                                    }}张，点击图片查看全部</i
                                >
                            </font>
                        </li>
                        <li class="flex-content">
                            <span>领导批示</span
                            ><font :title="detailsList.leaderComment">{{ detailsList.leaderComment }}</font>
                        </li>
                        <li class="flex-content">
                            <span>存在风险和问题</span
                            ><font :title="detailsList.riskProblem">{{ detailsList.riskProblem }}</font>
                        </li>
                        <li class="flex-content">
                            <span>备注</span>
                            <font :title="detailsList.remarks">{{ detailsList.remarks }}</font>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
        </el-dialog>
        <map-location ref="MapLocation"></map-location>
    </page-box>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { dialogPreviewImg } from "@/components/public/preview-img/index";
import MapLocation from "@/components/map-location/index.vue";

@Component({
    name: "ProjectDetails",
    components: {
        MapLocation
    }
})
export default class ProjectDetails extends Vue {
    // 项目进度表格的数据
    processList: any[] = [];
    // 当前某一个进度信息的详情数据
    detailsList = {
        content: "",
        process: "",
        leaderComment: "",
        stage: "",
        remarks: "",
        riskProblem: "",
        completeTime: "",
        state: "",
        resImgList: []
    };

    // 当前项目的基本信息
    projectInfo = {
        name: "",
        type: "",
        investor: "",
        projectContent: "",
        totalInvestment: "",
        leadName: "",
        responsible: "",
        stageName: "",
        process: "",
        remarks: "",
        projectAuth: [],
        resImgList: [],
        stage: []
    };

    // 用于回显图片
    imgList: any[] = [];
    // 获取当前区域所有的人员
    projectAuthList: any[] = [];

    dialogImageUrl = "";
    dialogVisible = false;
    // 用于控制右侧详情数据的展示
    dataLishow = false;

    // 获取成员列表和权限列表做对比  找出项目查看成员
    get authString() {
        const authList: any[] = [];
        this.projectAuthList.forEach((item: any) => {
            for (const i of this.projectInfo.projectAuth) {
                if (i === item.id) {
                    authList.push(item.name);
                }
            }
        });
        return authList;
    }

    created() {
        const projectID = this.$route.query.id;
        if (projectID) {
            this.getFormDetails(projectID);
        }
    }

    async getFormDetails(id: any) {
        const [res, ruslt] = await Promise.all([
            this.$server["project/editItem"]({
                data: {
                    id: id
                }
            }),
            this.$server["project/listByProject"]({
                data: {
                    projectId: id
                }
            })
        ]);
        if (res.data.code === 200) {
            this.projectInfo = res.data.data;
            if (this.projectInfo.resImgList) {
                this.imgList = this.projectInfo.resImgList.map((item: any) => {
                    return {
                        url: `${this.$staticUrl}${item}`
                    };
                });
            }
            const response = await this.$server["org/getMember"]({
                data: {
                    departmentId: "",
                    pageSize: 999999,
                    currentPage: 1
                },
                loader: false
            });
            if (response.data.code === 200) {
                this.projectAuthList = response.data.data.records;
            }
        }
        if (ruslt.data.code === 200) {
            this.processList = ruslt.data.data;
            this.detailsList =
                this.processList.length > 0
                    ? this.processList[0]
                    : this.detailsList;
        }
    }

    handleItemClick(scope: any) {
        this.detailsList = scope.row;
        this.dataLishow = true;
    }

    handleGoBack() {
        this.$router.push({
            name: "ProjectList"
        });
    }

    // 图片预览
    previewImg(url: any) {
        const imgList = url.map((item: any) => this.$staticUrl + "/" + item);
        dialogPreviewImg({
            title: "预览图片",
            current: imgList
        });
    }

    showAddress() {
        const { lngLat, address }: any = this.projectInfo;
        (this.$refs.MapLocation as any).show({
            longitude: lngLat.split(",")[0],
            latitude: lngLat.split(",")[1],
            cityAddress: address.substring(address.indexOf("/") + 1)
        }, "readonly");
    }
}
</script>

<style lang="scss" scoped>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.container {
    ::v-deep {
        .page-base-body {
            background-color: transparent;
            height: calc(100% - 50px);
        }
    }
}
.body-header {
    background: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 24px;
    & > div {
        p {
            margin-bottom: 10px;
            strong {
                font-size: 16px;
                font-family: PingFang SC;
                font-weight: 500;
                color: #2c82c9;
            }
            span {
                background: #2c82c9;
                padding: 0 10px;
                line-height: 20px;
                text-align: center;
                border-radius: 11px;
                color: #ffff;
                margin-left: 10px;
                font-size: 12px;
                font-weight: 400;
                font-family: "PingFang SC Medium";
                // &.avtive {
                //     background-color: #32A78F !important;
                // }
            }
        }
    }
    /deep/.line {
        display: flex;
        align-items: center;
        span {
            font-size: 14px;
            color: #37383a;
            margin-right: 6px;
        }
        .el-progress.el-progress--line{
            width: 172px;
        }

        .el-progress-bar__outer {
            width: 120px;
        }
    }
    /deep/.el-button {
        display: inline-block;
        line-height: 1;
        white-space: nowrap;
        cursor: pointer;
        background: #de2728;
        border: 1px solid #de2728;
        border-color: #de2728;
        color: #ffffff;
        -webkit-appearance: none;
        text-align: center;
        box-sizing: border-box;
        outline: none;
        margin: 0;
        transition: 0.1s;
        font-weight: 500;
        padding: 10px 20px;
        font-size: 14px;
        border-radius: 4px;
    }
}
.body-container {
    height: calc(100% - 85px);
    display: flex;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    margin-top: 10px;
    .body-left {
        width: 55%;
        height: 100%;
        overflow-y: auto;
        padding: 12px 24px;
        background: #ffffff;
    }
    .basic-info {
        p {
            font-size: 16px;
            color: #37383a;
        }
        li {
            display: flex;
            margin-top: 20px;
            font-size: 14px;
            font-family: "PingFang SC Medium";
            line-height: 20px;
            color: #AAAAAA;
            span {
                color: #aaaaaa;
                font-size: 14px;
                width: 24%;
            }
            em {
                font-style: normal;
                color: #37383a;
                width: 76%;
                max-width: 76%;
            }
            .project-address {
                cursor: pointer;
                color: #de2728;
                text-decoration: underline #de2728;
            }
        }
    }
    .info-node {
        margin-top: 24px;
        p {
            font-size: 16px;
            color: #37383a;
        }
        /deep/.el-table {
            margin-top: 24px;
        }
    }
    .img-info {
        margin-top: 24px;
        & > div {
            width: 160px;
            height: 160px;
            background-image: url("~@/assets/no-img.png");
            background-size: 160px 160px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 12px;
        }
        p {
            font-size: 16px;
            color: #37383a;
        }
        ul {
            display: flex;
            flex-wrap: wrap;
            margin-top: 12px;
            li {
                width: 160px;
                height: 160px;
                border-radius: 2px;
                overflow: hidden;
                margin-top: 12px;
                border: 1px solid #ccc;
                img {
                    width: 160px;
                    height: 160px;
                }
                & + li {
                    margin-left: 12px;
                }
                &:nth-child(7) {
                    margin-left: 0;
                }
            }
        }
    }
    .body-right {
        width: 45%;
        height: 100%;
        margin-left: 10px;
        background: #fff;
        p {
            font-size: 16px;
            color: #de2728;
            position: relative;
            padding-left: 12px;
            margin-bottom: 14px;
            border-left: 4px solid #de2728;
        }
        .process-info {
            padding: 12px 24px;
            background-color: #ffffff;
            height: 65%;
            overflow-y: auto;
        }
        .process-details {
            padding: 12px 24px;
            height: 35%;
            overflow-y: auto;
            background-color: #ffffff;
            border-top: 10px solid #EDEFF2;
        }
        ul {
            li {
                display: flex;
                margin-top: 12px;
                font-size: 14px;
                display: flex;
                span {
                    width: 16%;
                    color: #aaaaaa;
                    font-size: 14px;
                }
                font {
                    width: 80%;
                    color: #37383a;
                    overflow: hidden;
                    -o-text-overflow: ellipsis;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 5;
                    /* 可以显示的行数，超出部分用...表示*/
                    -webkit-box-orient: vertical;
                }
                img {
                    width: 120px;
                    height: 120px;
                }
                &.imgbox font {
                    display: flex;
                    flex-direction: column;
                    i {
                        font-style: normal;
                        color: #ccc;
                        font-size: 12px;
                        margin-top: 12px;
                    }
                }
            }
        }
    }
}
</style>
